<!--
 * @Description: Index
 * @Author: zy
 * @Date: 2021-03-26 19:44:06
 * @LastEditors: zy
 * @LastEditTime: 2021-04-14 21:39:29
-->
<template>
  <el-row id="Venue">
    <el-row style="height: 250px">
      <div id="tooltip"></div>
      <!-- panel -->
      <el-col :span="4" style="height: 250px; border: 1px solid">
        <!-- 获取作图区域的长度与宽度 -->
        <el-row id="range" style="height: 50px; margin-top: 5px" :gutter="10">
          <el-col :span="9" style="height: 100%; margin-left: 5px">
            <el-input v-model="heigth" placeholder="请输入长度"></el-input>
          </el-col>
          <el-col :span="9" style="height: 100%">
            <el-input v-model="width" placeholder="请输入宽度"></el-input>
          </el-col>
          <el-col :span="5" style="height: 100%">
            <el-button size="mini" @click="initCanvas">确定</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form size="mini" ref="form" :model="form" label-width="70px">
              <el-form-item label="起点">
                <el-input
                  id="startPoint"
                  v-model="form.start"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="终点">
                <el-input
                  id="endPoint"
                  v-model="form.end"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="场地名称">
                <el-input v-model="form.name" style="width: 150px"></el-input>
              </el-form-item>
              <el-form-item style="margin-left: -30px">
                <el-button type="primary" @click="regionalization"
                  >场地划分</el-button
                >
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-col>
      <!-- 人数折线图区域 -->
      <el-col :span="12" style="height: 250px; border-top: 1px solid; border-right: 1px solid">
        <el-dropdown>
          <el-dropdown split-button type="primary" size="mini" @click="handleClick()">
            选择时间
          </el-dropdown>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>第一天</el-dropdown-item>
            <el-dropdown-item>第二天</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown split-button type="primary" size="mini" @click="handleClick()">
          选择地点
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>会场入口</el-dropdown-item>
            <el-dropdown-item>会议室</el-dropdown-item>
            <el-dropdown-item>一楼大厅</el-dropdown-item>
            <el-dropdown-item>二楼厕所</el-dropdown-item>
            <el-dropdown-item>楼梯</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div id="peopleNumber"></div>
      </el-col>
      <!-- 很多仪表盘 -->
      <el-col :span="8" style="height: 250px; border-top: 1px solid; border-right: 1px solid">
        <div id="gauge"></div>
      </el-col>
    </el-row>
    <!-- 作图区域 -->
    <el-row style="height: calc(100% - 250px); border: 1px solid">
      <el-col :span="16" style="height: 100%; border-right: 1px solid">
        <div id="canvas"></div>
      </el-col>
      <el-col :span="8" style="height: 100%;">
        <div id="sankey"></div>
      </el-col>
    </el-row>
  </el-row>
</template>
<script>
import { VenueCanvas } from '@/assets/js/Venue_Canvas.js'
import * as HotMap from '@/assets/js/VenueHotMap.js'
import * as Track from '@/assets/js/UserTrack.js'
import * as Sankey from '@/assets/js/Sankey.js'
export default {
  data () {
    return {
      heigth: '',
      width: '',
      chart: {},
      form: {
        name: '',
        start: '',
        end: ''
      }
    }
  },
  mounted () {
    this.chart['venue'] = new VenueCanvas('canvas')
    this.chart.venue.initChart()
    this.initVenue()
    // this.userRealTrack()
    // this.userAreaTrack()
    // this.hotmapByPeriod()
    this.userSankey()
  },
  created () {},
  methods: {
    /**
     * 绘制会场地图，包括基本地形，区域，传感器位置
     */
    async initVenue () {
      /**
       * 场地的长和宽
       */
      const {data: res} = await this.$http.get('/venues/getVenue', {params: {
        'userName': 'zy',
        'venueName': 'vis',
        'floor': 1
      }})
      /**
       * 传感器的位置
       */
      const {data: sensor} = await this.$http.get('sensorPosition/allsensor', {params: {
        'floor': 1
      }})
      this.chart.venue.renderChart(res.width, res.height, sensor)
      /**
       * 所有的区域
       */
      const {data: areas} = await this.$http.get('/venueArea/allarea', {params: {
        'floor': 1
      }})
      // console.log(areas)
      this.chart.venue.setAllArea(areas)
    },
    /**
     * 根据选定的时间绘制场地热力图
     */
    async hotmapByPeriod () {
      const {data: res} = await this.$http.get('/sensorlog/period', {params: {
        'startTime': 36000,
        'endTime': 36120,
        'day': 1
      }})
      let ids = Object.keys(res)
      let sids = []
      for (let i = 0; i < ids.length; ++i) {
        sids.push([ids[i], res[ids[i]]])
      }
      // console.log(sids)
      HotMap.renderHotMap(sids)
    },
    /**
     * 用户某一天的真实轨迹
     */
    async userRealTrack () {
      const {data: res} = await this.$http.get('/sensorlog/userTrack', {params: {
        'user_id': 10001,
        'day': 1
      }})
      // console.log(res)
      Track.renderRealTrack(10001, res)
    },
    /**
     * 用户某一天的区域轨迹
     */
    async userAreaTrack () {
      const {data: res} = await this.$http.get('/areaTrack/track', {params: {
        'user_id': 10001,
        'day': 1
      }})
      // console.log(res)
      Track.renderAreaTrack(10001, res)
    },
    async userSankey () {
      var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'
      const {data: res} = await this.$http.get(ROOT_PATH + '/data/asset/data/product.json')
      console.log(res)
      Sankey.render('sankey', res)
    },
    initCanvas () {
      let height = parseInt(this.heigth)
      let width = parseInt(this.width)
      this.chart.venue.initAxis(width, height)
    },
    /**
     * 场地划分
     */
    regionalization () {
      this.chart.venue.brush(this.form)
    },
    /**
     * 确定场地位置之后增加场地名称
     */
    onSubmit () {
      // let name = this.form.name
      // let selection = [this.form.start.split(',').map(d => parseInt(d)),
      //   this.form.end.split(',').map(d => parseInt(d))]
      // this.chart.venue.setAreaName(name, selection)
      this.userAreaTrack()
    },
    saveArea () {}
  }
}
</script>
<style scoped>
#Venue {
  margin-top: 51px;
  height: calc(100%);
}
#canvas {
  height: 100%;
  width: 100%;
}
#peopleNumber {
  height: 90%;
  width: 100%;
}
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
